<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div id="abc" class="box" title="box"
       age="18" height="1.88">
    我是box
  </div>

  <input type="checkbox" checked="checked">

  <script>

    var boxEl = document.querySelector(".box")

    // 1.所有的attribute都支持的操作
    console.log(boxEl.hasAttribute("AGE"), boxEl.hasAttribute("abc"), boxEl.hasAttribute("id"))
    console.log(boxEl.getAttribute("AGE"), boxEl.getAttribute("abc"), boxEl.getAttribute("id"))

    boxEl.setAttribute("id", "cba")
    boxEl.removeAttribute("id")

    var boxAttributes = boxEl.attributes
    for (var attr of boxAttributes) {
      console.log(attr.name, attr.value)
    }

    // 2.通过getAttribute()一定是字符串类型
    var inputEl = document.querySelector("input")
    console.log(inputEl.getAttribute("checked"))
    
  </script>

</body>
</html>